<template>
  <div class="wrapper">
    <div class="titel-row">
      <div class="home-icon">
        <img src="../../assets/inquiryRegister/home.png" alt>
      </div>
      <div class="title">结案记录</div>
    </div>
    <div class="content">
      <SearchHeader v-on:callback="onSearchCallback" v-bind:config="searchConfig"/>
      <div class="table-wrapper">
        <el-table
          v-on:cell-click="onClickRow"
          :row-class-name="tableRowClassName"
          stripe
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          row-key="id"
        >
          <el-table-column
            v-for="(item,index) in thConfig"
            :key="index"
            v-bind:prop="item.prop"
            v-bind:label="item.label"
            :width="item.prop=='eventLevelName'?200:''"
          >
          <template slot-scope="scope">
            <ProgressBar v-if="item.prop=='eventLevelName'" :percentage="initPercentage(scope.row.eventLevelCode,eventLevelList)" :text="scope.row[item.prop]" :color="initcolor(scope.row.eventLevelCode,eventLevelList)"/>
            <span v-else>{{scope.row[item.prop]}}</span>
          </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-tooltip content="查看" placement="top">
                <el-button
                  v-on:click.stop.prevent="openDialog('ProcessingDialog',{btnType:[],item:scope.row})"
                  icon="el-icon-search"
                  size="small"
                  circle
                />
              </el-tooltip>
              <!-- <el-tooltip content="查看" placement="top">
                <el-button
                  v-on:click.stop.prevent="onDetail(scope.row)"
                  icon="el-icon-search"
                  size="small"
                  circle
                />
              </el-tooltip> -->
            </template>
          </el-table-column>
        </el-table>
        <div class="handle-row">
        </div>
      </div>
      <div class="pager">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="1"
          :page-size="10"
          prev-text="上一页"
          next-text="下一页"
          layout="total, prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <ViewDetail
      width="800px"
      :dialogVisible="detailVisible"
      @onClose="detailVisible=false"
      :list="detailData"
      :columns="detailColumns"
    />
    <ProcessingDialog @callBack="getList"/>
  </div>
</template>

<script>
import SearchHeader from "../../components/layout/searchHeader.vue"; //搜索栏
import { Popover, ViewDetail } from "../../components/common"; //小弹窗
import Pubsub from "../../utils/pubsub";
import ProcessingDialog from "../../components/incidentCenter/processingDialog.vue"; //弹窗
import ProgressBar from "../../components/common/progressBar"; //进度条
import {
  eventInfoCenterQueryRecordPage,
  findByDictCode,
} from "../../config/api.js";
import { getTimeStr } from "../../utils";
export default {
  components: {
    SearchHeader,
    Popover,
    ViewDetail,
    ProcessingDialog,
    ProgressBar,
  },
  data() {
    return {
      getTimeStr,
      eventLevelList:[],
      listRequest: { pageNum: 1, pageSize: 10 }, //列表请求餐来
      detailVisible: false, //详情窗口显示隐藏
      detailData: {}, //详情数据
      areaCode: [], //数据字典返回值--区域
      multipleSelection: [], //选中的项
      total: 0, //共多少条
      currentRow: {}, //当前操作的项
      thConfig: [
        { prop: "eventName", label: "案件名称" },
        { prop: "eventAddress", label: "案件地址" },
        { prop: "classBigName", label: "案件类型" },
        { prop: "eventLevelName", label: "案件等级"},
        { prop: "eventSourceName", label: "案件来源" },
        { prop: "newCreateTime", label: "上报时间" },
        { prop: "endUserName", label: "归档人" },
        { prop: "newEndTime", label: "归档时间" },
      ], //table头部配置
      tableData: [],
      searchConfig: [
        //搜索栏配置
        {
          label: "事件标题",
          code: "eventName",
          type: "search",
          value: ""
        },
        {
          label: "上报时间",
          code: ["startTime", "endTime"],
          type: "rangePicker",
          value: ""
        },
        {
          label: "事件类型",
          code: "classBigCode",
          type: "radio",
          value: "",
          data: []
        },
        {
          label: "事件来源",
          code: "eventSourceCode",
          type: "radio",
          value: "",
          data: [
            { name: "全部", value: "", active: true },
            { name: "内部上报", value: "1", active: false },
            { name: "分拣中心", value: "2", active: false },
          ]
        }
      ],
      detailColumns: [
        { dataIndex: "eventName", title: "案件名称" },
        { dataIndex: "eventAddress", title: "案件地址" },
        { dataIndex: "classBigName", title: "案件类型" },
        { dataIndex: "eventLevelName", title: "案件等级" },
        { dataIndex: "eventSourceName", title: "案件来源" },
        { dataIndex: "newCreateTime", title: "上报时间" },
        { dataIndex: "endUserName", title: "归档人" },
        { dataIndex: "newEndTime", title: "归档时间" },
      ]
    };
  },
  methods: {
    /**
     * 搜索栏回调
     */
    onSearchCallback(re = {}) {
      let request = Object.assign(this.listRequest, re);
      this.listRequest = request;
      this.getList();
    },
    /**
     * 设置table某一项class
     */
    tableRowClassName({ row, rowIndex }) {
      // if (rowIndex === 2) {
      //   return "warning-row";
      // }
      if (rowIndex % 2 === 0) {
        return "even-row";
      } else {
        return "odd-row";
      }
    },
    /**
     * 设置选中项
     */
    handleSelectionChange(e = []) {
      if (e.length) {
        e.map(item => {
          this.multipleSelection.push(item.id);
        });
      } else {
        this.multipleSelection = [];
      }
    },
    /**
     * 查看详情
     */
    onDetail(e) {
      // this.detailData=e||{};//传参
      this.detailData = e || {}; //传参
      this.detailVisible = true;
    },
    /**
     * 操作按钮点击事件
     */
    openDialog(type, values) {
      	Pubsub.publish(type, values);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.listRequest.pageNum = val;
      this.getList();
    },
    getList() {
      eventInfoCenterQueryRecordPage(this.listRequest).then((res = {}) => {
        if(res.rows&&res.rows.length){
          res.rows.map((item,index)=>{
            item.newCreateTime=getTimeStr(item.createTime);
            item.newEndTime=getTimeStr(item.endTime);
          })
        }
        this.tableData = res.rows || [];
        this.total = res.total || 0;
      });
    },
    /**
     * 点击table row
     */
    onClickRow(row) {
      this.$refs.multipleTable.toggleRowSelection(row);
    },
    /**
     * 获取数据字典--取件类型
     */
    getDictCode() {
      //事件等级
      findByDictCode({ dictCode: "eventLevelCode" }).then((res = {}) => {
        this.eventLevelList=res.data || [];
      });
      //事件类型
      findByDictCode({ dictCode: "classBigCode" }).then((res = {}) => {
        let {data=[]}=res;
        if(data.length>0){
          let arr=[{ name: "全部", value: "", active: true }];
          data.map(it=>{
            arr.push({ name: it.dictDataName, value: it.dictDataCode, active: false });
          });
        this.searchConfig.find(item => item.code == "classBigCode").data = arr || [];
        }
      });
    },
    initPercentage(eventLevelCode,eventLevelList=[]){
      let num=eventLevelList.length||1;
      if(eventLevelCode){
          return (eventLevelCode/num)*100
      }else{return 0}
      
    },
    initcolor(eventLevelCode,eventLevelList=[]){
      if(eventLevelList.length>0){
        return ((eventLevelList.find(item=>item.dictDataCode==eventLevelCode))||{}).dictDataDesc
      }
    }
  },
  created() {
    this.getList();
    this.getDictCode();
  }
};
</script>

<style lang = "scss" scoped>
.wrapper {
  margin: 20px;
  background: #fff;
}
.titel-row {
  display: flex;
  align-items: center;
  .home-icon {
    height: 50px;
    width: 50px;
    background: #1a36a9;
    margin-right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .title {
    font-size: 22px;
    color: #272c67;
  }
}
.content {
  padding: 0 20px 80px 20px;
}
.pager {
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
}
.table-wrapper {
  position: relative;
  margin-top: 46px;
  .handle-row {
    position: absolute;
    top: -40px;
    right: 0;
    display: flex;
    justify-content: flex-end;
  }
  .handle-btn {
    width: 76px;
    height: 30px;
    border-radius: 3px;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      margin-right: 10px;
    }
    &:last-child {
      margin-right: 0;
    }
    &:active {
      opacity: 0.8;
    }
    &.main {
      background: #1a36a9;
      color: #fff;
    }
    &.green {
      background: #007130;
      color: #fff;
    }
    &.default {
      background: #e5e5e5;
    }
    &:disabled {
      background: #ccc;
      color: #fff;
      opacity: 1;
    }
  }
}
</style>
<style>
</style>
